<template lang="pug">
  .important-wrap
    .important-info
      .row
        div(
          v-for="columnName in infoList"
          :key="columnName"
          :class="columns[columnName].columnSize | columnGird")
          info-render(
            v-if="formValues"
            :data="formValues[columnName]"
            :column="columns[columnName]"
            :minLength="columns[columnName].minLength"
            :isWarp="true")
            template(slot-scope="props")
              .file-warp(v-if="columns[columnName].file && props.content !== '-' || columns[columnName].dataType === 'upload'")
                span.important-label {{columns[columnName].label}}：
                FileBox.important-tpl(:fileList="props.content")
              .btn-wrap(v-else-if="columns[columnName].dataType === 'BUTTON' || columns[columnName].dataType === 'button'")
                // span.important-label {{columns[columnName].label}}:
                SmartLink.important-tpl(v-bind="columns[columnName]")
              .map-wrap(v-else-if="columns[columnName].dataType === 'LONLAT' || columns[columnName].dataType === 'location'")
                span.important-label {{columns[columnName].label}}:
                MapRender.important-tpl(v-bind="columns"
                  :lnglat="formValues[columnName]")
              div(v-else)
                span.important-label {{columns[columnName].label}}：
                | {{ props.content }}
        slot
</template>

<script>
/**
 * @name flowImportantInfo 流程重要信息面板组件
 * @editeAuthor 黄丰瑞 <huangfr@gddit.com>
 * @description 结合文件显示
 */
import InfoRender from '@/components/InfoRender'
import FileBox from '@/components/FileBox'
import SmartLink from '@/components/SmartForm/SmartFormItem/SmartLink'
import MapRender from './MapRender'
export default {
  name: 'importantInfo',
  components: {
    InfoRender,
    FileBox,
    SmartLink,
    MapRender
  },
  props: {
    infoList: Array, // 字段数组
    formValues: {
      type: Object,
      default: () => ({})
    }, // 字段值
    columns: Object // 字段配置
  },
  filters: {
    columnGird (columnSize = [
      { type: 'md', size: '6' },
      { type: 'sm', size: '12' }
    ]) {
      return columnSize.map(size => {
        return `col-${size.type}-${size.size}`
      })
    } // 计算信息项长度
  },
  data () {
    return {}
  }
}
</script>
<style scoped lang="sass">
.important-wrap
  font-size: 14px
  padding: 12px 15px
  line-height: 2.4
  border: 1px solid #ddd
  .important-info
    margin: 0 auto
    .important-label
      font-weight: bold
      margin-left: 10px
  .map-wrap
    display: flex
    .important-tpl
      margin-left: 20px
</style>
